<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2021-11-22 20:07:21
 * @LastEditTime: 2022-02-10 13:36:38
 * @LastEditors: xuechengwu
-->
<template>
  <el-collapse :value="configMenu">
    <el-collapse-item
        v-for="(item, index) in views"
        :name="index"
        :key="item.title"
    >
        <template slot="title">
            {{ item.title }}
        </template>
        <component
            :is="item.view"
            :get="get"
            :page="page"
        >
            <template
                v-for="vo in item.slots || []"
                :slot="vo.name"
            >
                <link-button
                    :key="vo.name"
                    :path="vo.path"
                    :page="page"
                    :mark="mark"
                    @change="onLinkChange"
                />
            </template>
        </component>
    </el-collapse-item>
    <el-collapse-item name="event" title="事件">
        <event-editor
            :page="page"
            :config="component"
            :app="app"
        />
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import { mapMutations } from 'vuex';
import LinkButton from './LinkButton.vue';
import EventEditor from './EventEditor.vue';

export default {
    props: ['mark', 'name', 'page', 'app'],
    components: {
        LinkButton,
        EventEditor,
    },
    methods: {
        ...mapMutations(['UPDATE_COMPONENT', 'UPDATE_LINK']),
        onLinkChange(data) {
            this.UPDATE_LINK(data);
        },
    },
    computed: {
        configMenu() {
            const { name } = this;
            const component = window.A5.getComponent(name).config;
            return Array((component.configView || []).length).fill(1).map((x, y) => x + y - 1);
        },
        views() {
            const { name } = this;
            const component = window.A5.getComponent(name) || {};
            return component.config.configView || []
        },
        get() {
            const { mark, page } = this;
            const { currentComponentParent = [] } = page;
            let container = page;
            for (let i = 0; i < currentComponentParent.length; i++) {
                const parentMark = currentComponentParent[i];
                container = container.components.find(vo => `${vo.mark}` === `${parentMark}`);
            }
            const currentComponent = container.components.find(vo => `${vo.mark}` === `${mark}`);
            return (path, defaultValue) => path.split('.').reduce((obj, key, currentIndex, arr) => {
                if (obj[key] !== undefined) {
                    return obj[key];
                }
                return !defaultValue ? arr.length - 1 === currentIndex ? '' : {} : defaultValue;
            }, currentComponent);
        },
        component() {
            const { mark, page } = this;
            const { currentComponentParent = [] } = page;
            let container = page;
            for (let i = 0; i < currentComponentParent.length; i++) {
                const parentMark = currentComponentParent[i];
                container = container.components.find(vo => `${vo.mark}` === `${parentMark}`);
            }
            return container.components.find(vo => `${vo.mark}` === `${mark}`);
        }
    },
    provide() {
        return {
            update: this.UPDATE_COMPONENT,
        }
    },
}
</script>

<style>

</style>